<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    名字:<input type="text" class="name" /><br />
    手机号 ：<input type="text" class="phone" /><br />
    qq号 ：<input type="text" class="qq" /><br />
    邮箱：<input type="text" class="email" /><br />
    密码强度：<input type="text" class="password" /><br />
    <input type="submit" value="提交" />
    <hr />
    <span class="info">提示信息</span>
    <script>
      // 名字
      var nameEle = document.querySelector(".name");
      var infoEle = document.querySelector(".info");
      nameEle.onblur = function () {
        var name = nameEle.value;
        var reg = /^[\u4e00-\u9fa5]{2,4}$/;
        if (reg.test(name)) {
          infoEle.innerHTML = "名字符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "名字不符合规则";
          infoEle.style.color = "red";
        }
      };
      //   手机号
      var phoneEle = document.querySelector(".phone");
      var infoEle = document.querySelector(".info");
      phoneEle.onblur = function () {
        var phone = phoneEle.value;
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phone)) {
          infoEle.innerHTML = "手机号符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "手机号不符合规则";
          infoEle.style.color = "red";
        }
      };
      //   qq号
      var qqEle = document.querySelector(".qq");
      var infoEle = document.querySelector(".info");
      qqEle.onblur = function () {
        var qq = qqEle.value;
        var reg = /^[1-9][0-9]{4,10}$/;
        if (reg.test(qq)) {
          infoEle.innerHTML = "qq号符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "qq号不符合规则";
          infoEle.style.color = "red";
        }
      };
      //   邮箱
      var emailEle = document.querySelector(".email");
      var infoEle = document.querySelector(".info");
      emailEle.onblur = function () {
        var email = emailEle.value;
        var reg = /^\w+@\w+(\.\w{3}|\.\w{3}.\w{2})$/;
        if (reg.test(email)) {
          infoEle.innerHTML = "qq号符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "qq号不符合规则";
          infoEle.style.color = "red";
        }
      };
      //   密码
      //   1.密码不低于8位
      // 2.如果是纯数字或者纯字母 密码强度低
      // 3.包含数字字母 密码强度中
      // 4.包含数字字母下划线且有大写字母 密码强度高
      var passwordEle = document.querySelector(".password");
      var infoEle = document.querySelector(".info");
      passwordEle.onblur = function () {
        var val = this.value;
        if (val.length > 8) {
          var reg1 = /(^\d+$)|(^[a-zA-Z]+$)/;
          if (reg1.test(val)) {
            infoEle.innerHTML = "密码强度低";
            infoEle.style.color = "green";
          } else {
            var reg2 = /\d/; // 匹配数字
            var reg3 = /[a-zA-Z]/; // 匹配字母
            var reg4 = /[A-Z]/;
            var reg5 = /_/;
            if (
              reg2.test(val) &&
              reg3.test(val) &&
              reg4.test(val) &&
              reg5.test(val)
            ) {
              infoEle.innerHTML = "密码强度强";
              infoEle.style.color = "green";
            } else {
              if (reg2.test(val) && reg3.test(val)) {
                infoEle.innerHTML = "密码强度中";
                infoEle.style.color = "green";
              }
            }
          }
        } else {
          infoEle.innerHTML = "密码必须大于8位";
          infoEle.style.color = "red";
        }
      };
    </script>
  </body>
</html>
